<template>
  <div class="content">
    <!--    <div class="searchKey">-->
    <!--      <span>Search keywords : </span>-->
    <!--      <span>{{query.viralFamily}}、</span>-->
    <!--      <span>{{query.virusSpecies}}</span>-->
    <!--    </div>-->
    <div class="notice">* Please click the "Viral genome" below to view the avaliable tracks.</div>
    <el-table
        v-loading="loading"
        :data="table"
        style="width: 100%;">
      <el-table-column
          align="center"
          label="Virus">
        <template slot-scope="scope">
          <span>{{ scope.row.virus_species }}</span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="Viral genome"
          prop="viral_genome">
        <template slot-scope="scope">
          <span :class="['b', scope.row.viral_genome == '-' ? '':'wetB']" @click="goVirus(scope.row)">{{ scope.row.viral_genome }}</span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="Host">
        <template slot-scope="scope">
          <span>{{ scope.row.host }}</span>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          label="Cell/Tissue">
        <template slot-scope="scope">
          <span>{{ scope.row.cell_tissue }}</span>
        </template>
      </el-table-column>

      <el-table-column
          align="center"
          label="Numbers of viral lncRNA">
        <template slot-scope="scope">
          <span :class="['b', scope.row.lncRNA == '-' ? '':'wetB']" @click="showRNAListClick(scope.row, 'lncRNA')">{{ scope.row.lncRNA }}</span>
        </template>
<!--        <div slot="header">-->
<!--          <div class="undline">Numbers of viral Transcripts</div>-->
<!--        </div>-->
<!--        <el-table-column-->
<!--            align="center"-->
<!--            width="120"-->
<!--            label="mRNA">-->
<!--          <template slot-scope="scope">-->
<!--            <span :class="['b', scope.row.mRNA == '-' ? '':'wetB']" @click="showRNAListClick(scope.row, 'mRNA')">{{ scope.row.mRNA }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            align="center"-->
<!--            width="120"-->
<!--            label="lncRNA">-->
<!--          <template slot-scope="scope">-->
<!--            <span :class="['b', scope.row.lncRNA == '-' ? '':'wetB']" @click="showRNAListClick(scope.row, 'lncRNA')">{{ scope.row.lncRNA }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            align="center"-->
<!--            width="110"-->
<!--            label="circRNA">-->
<!--        <template slot-scope="scope">-->
<!--          <span :class="['b', scope.row.circRNA == '-' ? '':'wetB']" @click="showRNAListClick(scope.row, 'circRNA')">{{ scope.row.circRNA }}</span>-->
<!--        </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column-->
<!--            align="center"-->
<!--            width="110"-->
<!--            label="sRNA">-->
<!--          <template slot-scope="scope">-->
<!--            <span :class="['b', scope.row.sRNA == '-' ? '':'wetB']" @click="showRNAListClick(scope.row, 'sRNA')">{{ scope.row.sRNA }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table-column>

    </el-table>
    <div class="pagination">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="query.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="query.total">
      </el-pagination>
    </div>

    <dy-table v-if="dyTableData.show"
              :loading="dyTableData.loading"
              :list="dyTableData.list"
              :total="dyTableData.total"
              :rnaType="dyTableData.rnaType"
              @refreshData="refreshDyData"
              id="dy-table"
              class="dy-table"
              ref="dyTable"/>

    <div v-if="showGenView">
      <div class="result">Tracks view :
        <div class="subTitle">This track shows all the RNA products of the virus genome.</div>
      </div>
      <i-frame :autoHeight="true" ref="genView" id="genView" :src="genViewUrl"/>
    </div>
  </div>
</template>

<script>
import {getVirusiStatistical, groupList} from '@/api/rna'
import DyTable from "./dyTable";
import {getViralGenomeView} from "../../api/browse";
import IFrame from "@/components/iFrame";
import {isEmpty} from "../../utils/validate";

export default {
  name: "statisticalView",
  components: {DyTable, IFrame},
  props: {
    options: {
      type: Object,
      default: function () {
        return {}
      }
    },
    refreshData: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      table: null,
      statList: [],
      query: {
        pageSize: 10,
        pageNum: 1,
        keyword: null,
        virusSpecies: null,
        viralGroup: null,
        viralFamily: null,
        host: null,
        rnaType: null,
        abbreviation: null,
        speciesList: [],
      },
      loading: false,

      dyTableData: {
        show: false,
        list: [],
        total: 0,
        loading: false,
        rnaType: null,

        params: {
          pageNum: 1,
          pageSize: 10,
        }
      },
      genViewUrl: null,
      showGenView: false,
    }
  },
  watch: {
    // $route(to) {
    //   this.setParams()
    //   this.search()
    // },
    options: {
      handler(newVal, oldVal) {
        this.setParams()

        // 刷新统计参数时，也重置底部表格
        this.dyTableData = {
          show: false,
          list: [],
          total: 0,
          loading: false,
          rnaType: null,

          params: {
            pageNum: 1,
            pageSize: 10,
          }
        }
        if (this.refreshData) {
          this.search()
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
  },
  methods: {

    setParams() {
      let pageNum = this.query.pageNum
      let pageSize = this.query.pageSize

      this.query = {...this.options}
      this.query.pageNum = pageNum
      this.query.pageSize = pageSize

      // this.query.keyword = this.options.keyword
      // this.query.virusSpecies = this.options.virusSpecies
      // this.query.viralGroup = this.options.viralGroup
      // this.query.viralFamily = this.options.viralFamily
      // this.query.host = this.options.host
      // this.query.rnaType = this.options.rnaType
      // this.query.abbreviation = this.options.abbreviation
      // this.query.speciesList = this.options.speciesList
    },
    async search() {
      this.loading = true
      const query = this.query
      const res = await getVirusiStatistical(query)
      if (res) {
        this.query.total = res.data.length
        this.dealData(res.data)
        this.dealPageData()
      }

      this.loading = false
    },
    dealData(data) {
      let val = {}
      data.map(n => {
        let key = n.virus_species + n.viral_genome + n.host + n.cell_tissue;
        if (val.hasOwnProperty(key)) {
          val[key][n.rna_type] = n.num
        } else {
          val[key] = {
            virus_species: n.virus_species || '-',
            viral_genome: n.viral_genome || '-',
            host: n.host || '-',
            cell_tissue: n.cell_tissue || '-',
            mRNA: '-',
            lncRNA: '-',
            circRNA: '-',
            sRNA: '-',
          }
          val[key][n.rna_type] = n.num || '-'
        }
      })

      let arr = []
      for (let k in val) {
        arr.push(val[k])
      }
      this.statList = arr
    },
    dealPageData() {
      let start = (this.query.pageNum - 1) * this.query.pageSize
      let end = start + this.query.pageSize
      this.table = this.statList.slice(start, end);
    },
    handleSizeChange(val) {
      this.query.pageSize = val
      this.query.pageNum = 1
      this.dealPageData()
    },
    handleCurrentChange(val) {
      this.query.pageNum = val
      this.dealPageData()
    },
    refreshDyData(pageNum, pageSize) {
      this.dyTableData.params.pageNum = pageNum
      this.dyTableData.params.pageSize = pageSize

      this.getDyRnaListData()
    },
    async getDyRnaListData() {
      this.dyTableData.loading = true
      const res = await groupList(this.dyTableData.params)
      if (res) {
        this.dyTableData.total = res.total
        this.dyTableData.list = res.rows;
      }
      this.dyTableData.loading = false
      this.goDyTable()
    },
    showRNAListClick(row, type) {
      // 隐藏浏览器
      this.genViewUrl = null
      this.showGenView = false
      this.dyTableData.show = true
      this.dyTableData.rnaType = type

      this.dyTableData.params = {
        virusSpecies: row.virus_species === '-' ? null : row.virus_species,
        viralGenome: row.viral_genome === '-' ? null : row.viral_genome,
        host: row.host === '-' ? null : row.host,
        cellTissue: row.cell_tissue === '-' ? null : row.cell_tissue,
        rnaType: type,
        pageNum: 1,
        pageSize: 10
      }

      this.getDyRnaListData()
    },
    async goVirus(e) {
      this.dyTableData.show = false
      this.genViewUrl = null
      this.showGenView = true
      this.$nextTick(()=> {
        this.$refs.genView.setLoading(true)
      })
      const res = await getViralGenomeView({viralGenome: e.viral_genome})
      if (res.code == 200) {
        this.genViewUrl = res.data.url
      }
      this.goTracksView()
    },
    // goDyTable() {
    //   this.$nextTick(()=> {
    //     document.getElementById('dy-table').scrollIntoView({block: 'center'});
    //   })
    // },
    goDyTable() {
      this.$nextTick(() => {
        // 实现滚动效果
        let top = document.documentElement.scrollTop
        let endY = document.getElementById("dy-table").offsetTop
        const timeTop = setInterval(() => {
          document.body.scrollTop = document.documentElement.scrollTop = top += 20
          if (top >= endY) {
            clearInterval(timeTop);
          }
        }, 3);
      })
    },
    // goTracksView() {
    //   this.$nextTick(()=> {
    //     document.getElementById('genView').scrollIntoView({block: 'center'});
    //   })
    // },
    goTracksView() {
      this.$nextTick(() => {
        // 实现滚动效果
        let top = document.documentElement.scrollTop
        let endY = document.getElementById("genView").offsetTop
        const timeTop = setInterval(() => {
          document.body.scrollTop = document.documentElement.scrollTop = top += 20
          if (top >= endY) {
            clearInterval(timeTop);
          }
        }, 3);
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
.content {
  width 1170px
  margin-top 20px
  margin-bottom 60px

  /*font-family: Times New Roman;*/

  .notice {
    font-weight 700
    margin-bottom 10px
  }

  .subTitle {
    margin-top 20px
    font-size 18px
    color #7a7a7a
    //color #0a2458

    .a {
      color #0a2458
      cursor pointer
      text-decoration underline
    }
    .a:hover {
      color #9c1919
    }
  }

  .searchKey {
    margin-top 60px
    font-family: Times New Roman;
    color #0a2458
    font-size 18px
    font-weight 800
  }

  .el-table /deep/ {
    border-top: 1px solid #11427d;
    border-bottom: 1px solid #11427d;
    .b {
      cursor pointer
      color #0a2458
      font-weight 600
    }

    .wetB {
      text-decoration underline
      color #0064bc
    }

    .cell {
      font-weight 800
      font-size 16px
    }

    th.el-table__cell {
      background none
      font-size 16px
      color #11427D
      border none
    }

    td {
      border none
    }

    //设置图标颜色

    .el-loading-spinner .path {
      stroke: #11427D;
    }
  }

  .undline {
    font-weight 800
    text-decoration: underline !important;
    font-style: oblique;
  }

  .el-table--border, .el-table--group {
    border none
    border-top 1px solid #11427DFF
    border-bottom 1px solid #11427DFF
  }

  .el-table--border::after, .el-table--group::after, .el-table::before {
    background #fff
  }

  .pagination /deep/ {
    padding-top 20px
    text-align center

    .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #11427DFF;
      color: #FFF;
    }
  }

  .dy-table {
    margin-top 80px
  }

  #genView {
    margin-top 20px
  }

  .result {
    font-size 25px
    color #11427D
    font-weight 800
    margin-top 40px
    font-family: Times New Roman;
  }
}
</style>
